<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
		<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" style="padding: 30px;font-size: 80px;" />
		<button  style="padding: 30px;font-size: 80px;" id="snap" onclick="takePhoto()">拍照</button>
		<button  style="padding: 30px;font-size: 80px;" id="close" onclick="closeMedia()">关闭</button>
	</div>
	<div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
		<!-- autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。 -->
		<video id="video" width="500" height="500" autoplay="autoplay"></video>
		<canvas id="canvas" width="500" height="500"></canvas>		
	</div>
<script>
	var buffer;
    //获得video摄像头区域
	var video = document.getElementById('video');
	//获得Canvas对象
	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext('2d');
    function closeMedia() {
		try{
			buffer&&buffer.getTracks()[0].stop();//关闭摄像头
		}catch(e){
			//TODO handle the exception
			return;
		}
    }
    function getMedia() {
        let mediaConfig = {
			// 强制打开后置摄像头video:视频  audio:音频
			video: {facingMode: {exact: 'environment'}},
            audio: false,
			// 请求不带任何参数的视频和音频
			// vidio: true, audio: true
			// 指定视频分辨率
			// video: {width: 480, height: 320}
			// 移动设备，优先使用前置摄像头
			// video: {facingMode: 'user'}
			// 移动设备，优先使用后置摄像头
			// {video: {facingMode: {exact: 'environment'}}}
        };
		var errBack = function(e) {
			console.log('An error has occurred!', e)
		};
		if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);
				// video.srcObject = stream;
				video.play();
				buffer = stream;
			});
		}else if(navigator.getUserMedia) { // Standard
			navigator.getUserMedia(mediaConfig, function(stream) {
				video.src = stream;
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
			navigator.mozGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.msGetUserMedia) { // Mozilla-prefixed
			navigator.msGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
			navigator.webkitGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		}
    }
    function takePhoto() {
        ctx.drawImage(video, 0, 0, 500, 500);
		// 把画布的内容转换为base64编码格式的图片
		// var data = canvas.toDataURL( 'image/png',1);  //1表示质量(无损压缩)
		// return data.replace('data:image/png;base64,','');
    }
</script>
</body>
</html>
